<template>
    <div class="function-content">
        <div class="container">
            <!-- 标题部分 -->
            <div class="title-section">
                <h2 class="main-title">功能丰富，兼容主流软件/插件</h2>
            </div>

            <!-- 软件集成部分 -->
            <div class="software-section">
                <div class="software-grid">
                    <div v-for="software in softwareList" :key="software.id" class="software-card">
                        <div class="software-logo">
                            <img :src="software.logo" alt="">
                        </div>
                        <div>
                            <h3 class="software-name">{{ software.name }}</h3>
                            <p class="software-desc">支持客户端提交</p>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 功能特性网格 -->
            <div class="features-section">
                <div class="features-grid">
                    <div v-for="feature in featuresList" :key="feature.id" class="feature-card">
                        <div class="feature-content">
                            <div class="feature-icon">
                                <el-icon>
                                    <component :is="feature.icon" />
                                </el-icon>
                            </div>
                            <h4 class="feature-title">{{ feature.title }}</h4>
                        </div>
                        <p class="feature-desc">{{ feature.description }}</p>
                    </div>
                </div>
            </div>
            <div class="cta-section">
                <el-button type="primary" class="try-button">
                    立即试用
                    <el-icon class="ml-2">
                        <ArrowRight />
                    </el-icon>
                </el-button>
            </div>
        </div>
    </div>
</template>

<script lang="ts" setup>
import {
    Box,
    Cpu,
    Cloudy,
    View,
    Files,
    Mic,
    Document,
    Lock,
    Monitor,
    Connection,
    Share,
    Money,
    Star,
    Download,
    Service,
    Refresh
} from '@element-plus/icons-vue'

// 软件列表数据
const softwareList = [
    { id: 1, name: '3ds Max', logo: '/src/assets/img/lunbo.png' },
    { id: 2, name: 'V-Ray', logo: '/src/assets/img/lunbo.png' },
    { id: 3, name: 'Corona', logo: '/src/assets/img/lunbo.png' },
    { id: 4, name: 'Sketchup', logo: '/src/assets/img/lunbo.png' }
];

// 功能特性列表数据
const featuresList = [
    { id: 1, title: '分块式渲染', description: '支持单相机任意选择4-16台机器进行分块渲染，实现难以想象的速度', icon: Box },
    { id: 2, title: '自动识别插件及版本', description: '自动识别插件及版本，如Multiscatter、ForestPack等，让云端渲染操作更便捷', icon: Cpu },
    { id: 3, title: '支持一键转换场景版本', description: '支持上传场景文件，一键转换场景版本', icon: Cloudy },
    { id: 4, title: 'AI无损放大', description: 'AI无损放大，低分辨率图片AI无损放大至超高清，结合免费样图渲染功能，可直接免费渲染', icon: View },
    { id: 5, title: '参数智能检测', description: '检测参数设置错误或过高，除提醒外还提供一键智能优化', icon: Files },
    { id: 6, title: '一键小光子', description: '支持自定义小光子大小，自动渲染小光子，再渲染最终图，节省渲染时间', icon: Mic },
    { id: 7, title: '批量提交', description: '支持多相机同时提交，每个相机支持不同分辨率', icon: Document },
    { id: 8, title: '丢失图片自动识别', description: '效果图渲染时，系统自动提醒丢失贴图，确保高质量渲染效果', icon: Lock },
    { id: 9, title: '多样渲染通道', description: '支持AO通道、材质通道等，便于后期针对性地优化图片细节', icon: Monitor },
    { id: 10, title: '支持LUT', description: '支持V-Ray、Corona的LUT功能，高版本自动上传LUT', icon: Connection },
    { id: 11, title: '渲染器支持', description: '支持V-Ray、Corona等主流渲染器，满足90%建筑室内设计师渲染需求', icon: Share },
    { id: 12, title: '自动查杀毒', description: '自动查杀场景病毒，确保场景安全', icon: Money },
    { id: 13, title: '免费下载源文件', description: '支持一键免费下载源文件（14天内）', icon: Star },
    { id: 14, title: '渲染全景实时预览', description: '渲染过程中可360°预览场景效果，发现错误及时终止渲染，及时止损', icon: Download },
    { id: 15, title: 'AI加速渲染', description: 'AI渲染速度提升40%，大幅降低渲染成本', icon: Service },
    { id: 16, title: '场景助手', description: '一键调整场景中材质反射折射细分、max depth、灯光细分等参数', icon: Refresh }
];
</script>

<style lang="scss" scoped>
@use 'sass:math';

@function rem($px) {
    @return math.div($px, 16) * 1rem;
}

.function-content {
    // background: linear-gradient(180deg, #F7F8FF 0%, rgba(228, 238, 248, 0.58) 72%, rgba(20, 114, 227, 0.2) 100%);
    background: #fff;
    height: rem(750);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: rem(40);
}

.container {
    width: rem(910);
}

.title-section {
    text-align: center;
    margin-bottom: rem(40);

    .main-title {
        font-size: rem(28);
        font-weight: bold;
        color: #333;
        margin: 0;
    }
}

.software-section {
    margin-bottom: rem(50);

    .software-grid {
        display: grid;
        gap: rem(14);
        grid-template-columns: repeat(4, 1fr);

        .software-card {
            display: flex;
            background: rgba(255, 255, 255, 0.4);
            height: rem(70);
            align-items: center;
            border-radius: rem(15);
            gap: rem(15);
            text-align: center;
            padding-left: 30px;

            .software-logo {
                width: rem(38);
                height: rem(38);

                img {
                    width: 100%;
                    height: 100%;
                }
            }

            .software-name {
                font-size: rem(16);
                font-weight: 700;
                color: rgb(20 20 20/var(--tw-text-opacity, 1));
                margin: 0 0 rem(4) 0;
            }

            .software-desc {
                font-size: rem(10);
                color: #666;
                margin: 0;
            }
        }
    }
}

.features-section {
    .features-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
        gap: 0;
        border: 2px solid #fff;
        border-radius: rem(12);
        overflow: hidden;
        background: linear-gradient(180deg, #f7f9fd, #e2ecfb);
        backdrop-filter: blur(20px);

        .feature-card {
            padding: rem(16);
            display: flex;
            flex-direction: column;
            align-items: center;
            border-right: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transition: background-color 0.2s ease;

            &:nth-child(4n) {
                border-right: none;
            }

            &:nth-child(n+13) {
                border-bottom: none;
            }

            &:hover {
                background: #fff;
                border-radius: rem(15);
            }

            .feature-content {
                display: flex;
                align-items: center;
                gap: rem(8);
                width: 100%;

                .feature-icon {
                    width: rem(18);
                    height: rem(18);
                    background: #4A90E2;
                    border-radius: rem(6);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    color: white;
                    font-size: rem(16);
                    margin-bottom: rem(4);
                }

                .feature-title {
                    font-size: rem(12);
                    font-weight: 700;
                    color: #000;
                    margin: 0;
                    line-height: 1.2;
                }
            }

            .feature-desc {
                font-size: rem(10);
                color: #666;
                line-height: 1.3;
                margin: rem(4) 0 0 0;
            }
        }
    }
}

.cta-section {
    margin-top: rem(30);
    display: flex;
    justify-content: center;

    .try-button {
        background: linear-gradient(90deg, rgb(15, 210, 183) 0%, rgb(37, 207, 107) 100%);
        border: none;
        border-radius: rem(25);
        width: rem(115);
        height: rem(32);
        font-size: rem(12);
        font-weight: 400;
        display: flex;
        align-items: center;

        .ml-2 {
            margin-left: rem(15);
        }

        &:hover {
            background: linear-gradient(90deg, rgb(37, 207, 107) 0%, rgb(15, 210, 183) 100%);
        }
    }
}
</style>